<template>
  <div class="home-container">
    <div class="home-top-title">
      <van-icon
        name="arrow-left"
        color="#fff"
        class="home-icon"
        @click="onClickLeft"
      />
      <img src="@/assets/logo1.webp" alt="Logo" class="home-logo" />
      <h1 class="home-title">种子生产经营备案</h1>
    </div>

    <div class="home-top-header">
      <div class="home-header-title">备案一站式服务</div>
      <div class="home-header-subtitle">服务一站办理，提高办事效率</div>
    </div>

    <div class="home-beian-content">
      <div
        v-if="!userInfo || !userInfo.UserRoleID || userInfo.UserRoleID != '1'"
      >
        <van-cell :border="false">
          <template #title>
            <span class="home-cell-title">代办</span>
          </template>
        </van-cell>
        <van-grid
          :center="false"
          column-num="2"
          :border="false"
          :gutter="8"
          style="margin: 0 6px"
        >
          <van-grid-item
            v-for="item in beianGlList"
            :key="item.type"
            class="home-grid-item"
            @click="glbaClick(item)"
          >
            <div
              class="home-ba-grid-item-content"
              :style="{ backgroundColor: item.bg }"
            >
              <div class="home-ba-text-container">
                <div style="display: inline-block">
                  <span class="home-ba-title"> {{ item.text }} </span>

                  <van-badge
                    v-if="item.glcount > 0"
                    max="99"
                    :content="item.glcount"
                    color="#F38045"
                  />
                </div>
                <van-text-ellipsis
                  class="home-ba-description"
                  rows="2"
                  :content="item.gldes"
                />
              </div>
              <img class="home-ba-icon" :src="item.icon" alt="icon" />
            </div>
          </van-grid-item>
        </van-grid>
      </div>

      <van-cell :border="false">
        <template #title>
          <span class="home-cell-title">数据查询</span>
        </template>
        <template #value> </template>
        <template #right-icon> </template>
      </van-cell>
      <van-grid
        :center="false"
        column-num="3"
        :border="false"
        :gutter="8"
        style="margin: 0 6px"
      >
        <van-grid-item
          v-for="item in sjcxItems"
          :key="item.id"
          class="home-grid-item"
          @click="zfClick(item)"
        >
          <div
            class="home-zf-grid-item-content"
            :style="{ background: item.bg }"
          >
            <img class="home-zf-icon" :src="item.icon" alt="icon" />
            <div class="home-zf-text-container">
              <div style="display: inline-block">
                <span class="home-zf-title"> {{ item.text }} </span>
              </div>
              <van-text-ellipsis
                class="home-zf-description"
                rows="2"
                :content="item.des"
              />
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getGlBaList, setGlCount } from "@/bean/BeiAnType";
import homeBatjIcon from "@/assets/img/home_batj.png";
import homeBalbIcon from "@/assets/img/home_balb.png";
import homeYhglIcon from "@/assets/img/home_yhgl.png";
import { routerPath } from "@/router/routerPath.js";
import uiUtil from "@/util/UiUtil.js";

const userInfo = ref({});
onMounted(() => {
  try {
    userInfo.value = JSON.parse(localStorage.getItem("user"));
    console.log(userInfo.value);

    if (
      userInfo.value &&
      userInfo.value.UserID &&
      userInfo.value.UserID.length > 0
    ) {
      if (
        userInfo.value.UserTypeID == "Admin" &&
        userInfo.value.UserRoleID != "1"
      ) {
        getGlbaCount();
      }
    }
  } catch (e) {
    console.log(e);
  }
});

const router = useRouter();
const beianGlList = ref(getGlBaList());

const sjcxItems = ref([
  {
    id: 1,
    icon: homeBatjIcon,
    text: "备案统计",
    des: "您可以查看备案指南帮助您了解",
    bg: "linear-gradient(to bottom, #FFE9E9,#FFFFFF)",
    uiPath: routerPath.GlBatj,
  },
  {
    id: 2,
    icon: homeBalbIcon,
    text: "备案列表",
    des: "您可以查看备案指南帮助您了解",
    bg: "linear-gradient(to bottom, #FDEEDF,#FFFFFF)",
    uiPath: routerPath.GlBalb,
  },
  {
    id: 3,
    icon: homeYhglIcon,
    text: "用户管理",
    des: "您可以查看备案指南帮助您了解",
    bg: "linear-gradient(to bottom,#E4FBE4,#FFFFFF)",
    uiPath: routerPath.Glyhgl,
  },
]);

const onClickLeft = () => {
  console.log("主页返回");
};
const glbaClick = (item) => {
  if (
    !userInfo.value ||
    !userInfo.value.UserID ||
    userInfo.value.UserID.length < 1
  ) {
    router.push({ path: routerPath.login });
    return;
  }
  if (userInfo.value.UserTypeID != "Admin") {
    uiUtil.toastFail("请登录管理用户");
    return;
  }
  console.log(item);
  router.push({ path: item.glpath, query: { itemId: item.type.toString() } });
};
const zfClick = (item) => {
  if (
    !userInfo.value ||
    !userInfo.value.UserID ||
    userInfo.value.UserID.length < 1
  ) {
    router.push({ path: routerPath.login });
    return;
  }
  router.push({ path: item.uiPath });
};
const getGlbaCount = () => {
  var data = {
    RegionID: userInfo.value.RegManageRegionID,
  };
  uiUtil.http().getObj({
    url: uiUtil.urlPath.filingAcceptCountVO,
    data: data,
    start: () => {
      // uiUtil.toastLoading('加载中...');
    },
    succeed: (res) => {
      if (!res) {
        uiUtil.toastFail("网络超时");
        return;
      }
      if (!res || !res.code || 200 != res.code) {
        uiUtil.toastFail(res.msg);
        return;
      }
      console.log(res.data);
      setGlCount(res.data);
      beianGlList.value = getGlBaList();
      uiUtil.toastClose();
    },
    failed: (err) => {
      uiUtil.toastFail("失败：" + err);
    },
    finish: (type) => {
      console.log("finish=", type);
      // uiUtil.toastClose();
    },
  });
};
</script>

<style lang="less" scoped>
.home-container {
  background-color: #fff;
  background: url("@/assets/img/main/home_bg.png") no-repeat;
  background-size: 100%;
  height: 100%;
}

.home-top-title {
  display: flex;
  align-items: center;
  /* 垂直居中 */
  padding: 12px;
  color: white;
}

.home-icon {
  margin-right: 10px;
  /* 图标与其他元素的间距 */
}

.home-logo {
  height: 40px;
  /* 根据需要调整Logo大小 */
  margin-right: 10px;
  /* Logo与标题的间距 */
}

.home-title {
  /* 根据需要调整字体大小 */
  font-size: 20px;
  /* 设置字体权重为500 */
  font-weight: 500;
  /* 去掉默认的margin */
  margin: 0;
  color: white;
}

.home-top-header {
  margin-top: 20px;
  margin-left: 20px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  font-weight: 400;
}

.home-header-title {
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  padding: 0;
}

.home-header-subtitle {
  color: rgba(255, 255, 255, 0.7);
  margin-top: 4px;
}

.home-beian-content {
  margin-top: 32px;
  height: 100%;
  background: #fff;
}

.home-cell-title {
  color: rgb(34, 34, 34);
  font-size: 16px;
  font-weight: 500;
}

.home-cell-value {
  color: rgb(34, 34, 34);
  font-size: 12px;
  font-weight: 400;
}

.home-cell-right-icon {
  padding-left: 5px;
  font-size: 16px;
  line-height: inherit;
}

.home-description {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgb(255, 252, 240);
  color: rgb(102, 102, 102);
  padding: 8px 12px;
  font-weight: 400;
  margin-bottom: 16px;
  margin-left: 16px;
  margin-right: 16px;
  border-radius: 8px;
  font-size: 12px;
}

.home-description-btn {
  margin: 0;
  background-color: rgb(231, 255, 246);
  border: transparent;
  padding: 4px 12px;
  color: rgb(22, 206, 138);
}

.home-ba-grid-item-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-radius: 8px;
  margin: 0px;
  padding: 0px;
}

.home-ba-text-container {
  margin: 0px;
  padding: 10px;
  flex: 1;
}

.home-ba-title {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #222222;
}

.home-ba-description {
  margin: 6px 0 0 0;
  font-weight: 400;
  font-size: 10px;
  color: #888888;
}

.home-ba-icon {
  align-self: center;
  width: 40px;
  height: 40px;
  padding-right: 10px;
  object-fit: cover;
  /* 确保图片适应容器 */
}

.home-grid-item :deep(.van-grid-item__content) {
  padding: 0px;
  background-color: transparent;
}

.home-zf-grid-item-content {
  align-items: center;
  align-content: center;
  text-align: center;
  border-radius: 8px;
  margin: 0;
  padding: 6px 0 16px 0;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.05);
  /* 黑色阴影，5%透明度 */
}

.home-zf-text-container {
  margin: 0px;
}

.home-zf-title {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #222222;
}

.home-zf-description {
  margin: 6px 10px 0 10px;
  font-weight: 400;
  font-size: 10px;
  color: #888888;
}

.home-zf-icon {
  align-self: center;
  width: 50px;
  height: 50px;
  object-fit: cover;
  /* 确保图片适应容器 */
}
</style>